<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2023-11-01 22:25:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-11-01 23:58:49
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>王者荣耀-header</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
  </head>
  <style>
    .header {
      background-color: rgba(0, 0, 0, 0.8);
    }
    .header .area {
      display: flex;
      justify-content: space-between;
      height: 84px;
    }
    .header .area .left_area {
      display: flex;
    }
    .header .left_area .logo a {
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
      display: block;
      width: 200px;
      height: 54px;
      text-indent: -9999px;
      background: url(./img/logo.png) no-repeat center center;
    }
    .header .left_area .nav-list {
      display: flex;
      margin-left: 25px;
    }
    .header .left_area .nav-list .item {
      width: 110px;
      padding-right: 5px;
      /* 这里为什么padding不是margin */
    }
    .header .left_area .nav-list .item:hover,
    .header .left_area .nav-list .item.active {
      background: url(./img/main_sprite.png) no-repeat 0 0;
    }
    .header .area .left_area .nav-list .item a {
      display: block;
      /* 到底怎么才能继承过来a的行高 */
      box-sizing: border-box;
      padding-top: 20px;
      font-size: 18px;
      color: #c9c9dd;
      text-align: center;
    }
    .header .left_area .nav-list .item:hover a,
    .header .left_area .nav-list .item.active a {
      color: #e4b653;
    }
    /* 1.父元素去除继承下来的行高 2.层叠行高*/
    .header .area .left_area .item a .desc {
      display: block;
      font-size: 12px;
      margin-top: 10px;
      color: #858792;
    }
    .header .left_area .nav-list .item:hover .desc,
    .header .left_area .nav-list .item.active .desc {
      color: #91763f;
    }
    .header .left_area .search {
      margin-left: 10px;
    }
    .header .left_area .search a {
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
      display: block;
      width: 27px;
      height: 26px;
      background: url(./img/nav_search.png);
    }
    .header .right_area {
      display: flex;
      align-items: center;
    }
    .header .right_area .image img {
      border: 1px solid #d9ad50;
      border-radius: 50%;
    }
    .header .right_area .info {
      margin-left: 10px;
    }
    .header .right_area .info a {
      color: #fff;
    }
    .header .right_area .info p {
      font-size: 14px;
      color: #858792;
      margin-top: 5px;
    }
  </style>
  <body>
    <div class="header">
      <div class="area header_wrapper">
        <div class="left_area">
          <h1 class="logo">
            <a href="#">王者荣耀</a>
          </h1>
          <ul class="nav-list">
            <li class="item active">
              <a href="#"
                >游戏资料
                <span class="desc">DATA </span>
              </a>
            </li>
            <li class="item">
              <a href="#"
                >内容中心
                <span class="desc">CONTENTS</span>
              </a>
            </li>
            <li class="item">
              <a href="#"
                >赛事中心
                <span class="desc">MATCH</span>
              </a>
            </li>
            <li class="item">
              <a href="#"
                >百态王者
                <span class="desc">CULTURE</span>
              </a>
            </li>
            <li class="item">
              <a href="#"
                >社区活动
                <span class="desc">COMMUNITY</span>
              </a>
            </li>
            <li class="item">
              <a href="#"
                >玩家支持
                <span class="desc">PLAYER</span>
              </a>
            </li>
            <li class="item">
              <a href="#"
                >IP新游
                <span class="desc">NEW GAMES</span>
              </a>
            </li>
          </ul>
          <div class="search"><a href="#"></a></div>
        </div>
        <div class="right_area">
          <a class="image">
            <img src="./img/header_login.png" alt="" />
          </a>
          <div class="info">
            <a href="#">欢迎登录</a>
            <p>登录后察看游戏战绩</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
